<template>
    <div class="paginationPage" style="margin:10px 0 0 0">
        <el-pagination 
            background
            :pager-count="pagerCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync ="paginationMes.current_page"
            :page-sizes="[10,20,50,100]"
            :page-size.sync="paginationMes.per_page"
            layout="total, prev, pager, next, sizes, jumper"
            :total="paginationMes.total"
            >
        </el-pagination>
    </div>
</template>

<script>
 /* eslint-disable */ 
export default {
    name:"pagination",
    props:{
        paginationMes:Object||{current:1},
        pagerCount:Number,
    },
    data(){
        return{
        }
    },
    methods:{
        /*改变当前数量 */
        handleSizeChange(val,$event) {
            this.$emit('sizeChangeFn',val)
        },
        /*改变当前页数 */
        handleCurrentChange(val) {
            this.$emit('currentChangeFn',val)
        }
    }
}
</script>

<style lang='stylus' scoped>
.paginationPage
    color #909399 
    text-align center
    >>>.el-pagination.is-background
        .btn-prev,.btn-next
            width 32px
            height 32px
            background #fff
            border 1px solid #DCDFE6 
            color #909399

    >>>.el-pager
        li:not(.disabled).active
            background #3296FA 
        li
            width 32px
            height 32px
            line-height 32px
            background #fff
            border-radius 4px
            border 1px solid #DCDFE6 
            color #909399
        .number
            background #fff
            color #909399
    >>>.el-pagination__jump
        color #909399
        margin-left 0
        height 32px
    >>>.el-input__inner
        color #909399
        height 32px
    >>>.el-pagination__total
        color #909399
        height 32px
        line-height 32px
</style>
